<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
  <div :class="{ bottombar: true, active: isActive }" :style="{}">
    <!-- <div class="left">{{ title.value }}</div>
        <div class="right"><img :src="wechatBar" /></div> -->
    <div v-for="(item, i) in items" :key="i" class="tab-item" @click="switchTab(item,i)">
      <img :src="active == i ? item.selectedIconPath : item.iconPath" alt="" />
      <div :style="{ color: active == i ? Color : '#999' }" >{{ item.text }}</div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: {
    title: { type: Object },
  },

  methods: {
    saveHandle: function () {},
    previewHandle: function () {},
    resetHandle: function () {},
    switchTab(item,i){
        var page = this.$store.state.pagemaker.pages.find( page => page.key == item.page_key )
        this.$store.dispatch("pagemaker/loadPage", page.id);
        this.active = i;
    },
  },

  computed: {
    isActive: function () {
      // 当前页面的tabbar是否显示为选中状态？
      // 当点击tabbar栏后，右侧编辑器切换为tabbar，此时tabbar栏被选中
      return this.$store.state.pagemaker.focus === "tabbar";
    },
    Color: function () {
      return this.$store.state.myconfig.color.primary || "#1989fa";
    },
    items: function () {
        //   return this.$store.state.pagemaker.pageTabbars;
        // 对pageTabbars进行过滤，过滤掉enable为false的
        return this.$store.state.pagemaker.pageTabbars.filter(item => item.enable);
    },
  },

  data() {
    return {
      active: 0,
    };
  },
};
</script>
<style scoped>
.bottombar {
  height: 120px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}

.tab-item {
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 120px;
  cursor: pointer;
}

.tab-item img {
  width: 60px;
  height: 60px;
}

.tab-item div {
  font-size: 24px;
  height: 24px;
  line-height: 34px;
}
</style>